<template>
	<div class="login">
		<loginhead></loginhead>
		<Myinput v-model="user.username" placeholder="用户名 / 手机号" :rules="namerules" msg="手机号输入不合法"></Myinput>
		<Myinput v-model="user.password" placeholder="密码" type="password" :rules="pwdrules" msg="密码输入不合法"></Myinput>
		<Myinput v-model="user.nickname" placeholder="昵称" type="text" :rules="nickrules"></Myinput>
		<div class="tips">
			已有账号?
			<router-link to="/login">去登陆</router-link>
		</div>
		<Mybtn type="primary" @btnN="regFn">注册</Mybtn>
	</div>
</template>
<script>
import {userRegisterAPI} from "@/apis/user";
import Mybtn from "@/components/Mybtn";
import Myinput from "@/components/Myinput";
import loginhead from "@/components/loginhead.vue";
import {nrules, prules, nkrules} from "@/utils/RegExp";

export default {
	data() {
		return {
			user: {
				username: "",
				password: "",
				nickname: "",
			},
			// namerules: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
			// pwdrules: /^[a-zA-Z0-9]\w{2,17}$/,
			// nickrules: /^.{3,20}$/,
			namerules: nrules,
			pwdrules: prules,
			nickrules: nkrules,
		};
	},
	components: {
		Mybtn,
		Myinput,
		loginhead,
	},
	methods: {
		async regFn() {
			if (this.namerules.test(this.user.username) && this.pwdrules.test(this.user.password) && this.nickrules.test(this.user.nickname)) {
				const res = await userRegisterAPI(this.user);
				console.log(res);
				if (res.data.message == "注册成功") {
					// this.$toast.success(res.data.message);
					// setTimeout(() => {
					// 	this.$router.push({
					// 		name: "login",
					// 	});
					// }, 2000);
					// 成功调用轻提示的 success() 方法，图标会有变化
					this.$toast.success({
						message: res.data.message,
						// 支持通过\n换行
						duration: 1200, //持续时间
						onClose: () => {
							// 通过 JS 方式跳转到登录页(编程式导航)
							this.$router.push({
								name: "login",
								query: {
									username: res.data.data.username,
								},
							}); // 关闭时的回调函数
						},
					});
					// setTimeout(() => {
					//   this.$router.push({ path: "/login" });
					// }, 2000);原生
					// this.$router.push({
					// 	name: "login",
					// });
				} else {
					// 成功调用轻提示的 fail() 方法，图标会有变化
					this.$toast.fail(res.data.message);
				}
			} else {
				this.$toast({
					message: "请输入规范的的用户名,密码和昵称",
				});
			}
		},

		// :value="username" @inputN="inputFn"  换成v-model
		// inputFn(name) {
		// 	this.username = name;
		// 	console.log(this.username);
		// },
	},
};
</script>
<style scoped lang="less">
.tips {
	padding: 15px 30px;
	text-align: right;
	font-size: 14px;
	a {
		color: rgb(0, 153, 255);
	}
}
</style>
